<template>
  <div v-loading="loading" class="app-container dialog">
    <div class="title">云平台故障</div>
    <div class="Subhead">基本信息</div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input :readonly="taskName != '发起'" style="width: 760px" v-model="form.title"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="联系人员" prop="contact_person">
            <el-input :readonly="taskName != '发起'" v-model="form.contact_person"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="contact_information">
            <el-input :readonly="taskName != '发起'" v-model="form.contact_information"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="Subhead">故障信息</div>
      <el-form-item label="故障现象">
        <editor 
        :readonly="taskName != '发起'"
        v-model="form.fault_phenomenon" style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                    " :min-height="192" :max-height="400" />
      </el-form-item>
    </el-form>
    <div class="Subhead">
      附件
      <el-upload v-if="taskName == '发起'" style="display: inline-block" class="upload-demo" accept list-type="picture"
        :show-file-list="false" ref="upload" :file-list="fileList" action="" :on-remove="handleChange"
        :on-change="handleChange" :auto-upload="false">
        <img style="width: 20px; cursor: pointer; vertical-align: middle" src="../../../assets/icons/add.png" alt="" />
      </el-upload>
    </div>
    <el-table :data="fileList">
      <el-table-column label="文件名称">
        <template slot-scope="scope">
          {{
                        scope.row.fileName
                            ? scope.row.fileName
                            : scope.row.name.substring(
                                  0,
                                  scope.row.name.lastIndexOf(".")
                              )
                    }}
        </template>
      </el-table-column>
      <el-table-column label="文件类型">
        <template slot-scope="scope">
          {{
                        scope.row.fileExt
                            ? scope.row.fileExt
                            : scope.row.name.substring(
                                  scope.row.name.lastIndexOf(".") + 1,
                                  scope.row.name.length
                              )
                    }}
        </template>
      </el-table-column>
      <el-table-column label="">
        <template slot-scope="scope">
          <span :style="
                            scope.row.fileExt ? 'color:green;' : 'color:red;'
                        ">
            {{ scope.row.fileExt ? "已上传" : "" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" v-show="scope.row.fileExt == 'jpeg' ||
                                   scope.row.fileExt == 'jpg' ||
                                   scope.row.fileExt == 'png' ||
                                   scope.row.fileExt == 'pdf' ||
                                   scope.row.fileExt == 'gif'" @click="previewFile(scope.row)">预览
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" v-if="taskName == '发起'"
            @click="DeleteFile(scope.row.id)">删除
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-download" v-if="scope.row.id" @click="download(scope.row)">下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
   <action-button v-if="taskName" :taskName="taskName" :loading="btnLoading" @changeExamineShow="changeExamineShow"/>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
    <el-dialog :title="num==1?'通过':'不通过'" :visible.sync="visible" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="意见:">
          <el-input type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入意见"
            v-model="comment">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="btnLoading" type="primary" @click="changeExamineShow(num,true)">确 定</el-button>
        <el-button :loading="btnLoading" @click="visible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    treeselect
  } from "@/api/system/dept";
  import Editor from "@/components/Editor";
  import {
    cloudUpList
  } from "@/api/cloud/cloud";
  import {
    definition
  } from "@/api/WorkOrder/OperationMaintenance.js";
  import {
    uploadFile
  } from "@/api/system/upload.js";
  import {
    Getformdata,
    taskComplete
  } from "@/api/todoItem/todo.js";
  import {
    DelectUploadFile
  } from "@/api/cloud/cloud";
  import actionButton from "@/components/actionButton/index.vue";
  export default {
    name: "CloudFailuresdetails",
    components: {
      Editor,actionButton
    },
    data() {
      return {
        visible: false,
        comment: '',
        num: 1,
        loading: false,
        taskName: "",
        title: "",
        taskId: "",
        definitionName: "",
        btnLoading: true,
       
        form: {
          title: "",
          contact_person: "",
          contact_information: "",
          fault_phenomenon: "",
          files: "",
        },
        // 网络环境下拉数据
        networkList: [{
            id: "政务外网",
            name: "政务外网",
          },
          {
            id: "互联网",
            name: "互联网",
          },
        ],
        fileList: [],
        rules: {},
        base_url: process.env.VUE_APP_BASE_API,
        dialogImageUrl: "",
        dialogVisible: false,
      };
    },
    created() {
      this.Getdata();
    },
    computed: {
      visitedViews() {
        return this.$store.state.tagsView.visitedViews;
      },
      routerUrl() {
        return this.$route.path;
      },
    },
    watch: {
      visitedViews(value) {
        if (value) {
          if (this.$options.name == "CloudFailuresdetails") {
            return;
          }
          this.$destroy(this.$options.name);
        }
      },
      routerUrl(value) {
        if (value == "/faultdeclara/CloudFailures/details") {
          this.Getdata();
        }
      },
    },
    methods: {
      handleChange(res, fileList) {
        this.fileList = fileList;
      },
      Getdata() {
        var list = JSON.parse(sessionStorage.getItem("CloudFailures"));
        this.title = list.instanceName;
        this.taskId = list.taskId;
        this.definitionName = list.definitionName;
        this.taskName = list.taskName;
        this.btnLoading = false;
        this.loading = true
        Getformdata(list.instanceId).then((res) => {
          this.form = res.data;
          this.fileList = res.data.files;
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      previewFile(item) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
      },
      download(item) {
        let downloadFile =
          this.base_url +
          "/system/downloadFile?fileName=" +
          item.fileName +
          "&filePath=" +
          item.filePath;
        window.location.href = downloadFile;
        return;
      },
      DeleteFile(id) {
        this.$confirm("本次操作会永久删除文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          DelectUploadFile(id).then((res) => {
            if (res.code == 200) {
              this.form.files = this.form.files.filter((item) => {
                if (item.id == id) {} else {
                  return item;
                }
              });
              this.fileList = this.fileList.filter((item) => {
                if (item.id == id) {} else {
                  return item;
                }
              });
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
        });
      },
      changeExamineShow(num, flag) {
     this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
     inputValue:num == 1 ? '通过': '不通过',
     }).then((resp) => {
            var Flies = [];
            if (this.fileList) {
              this.fileList.forEach((item) => {
                if (item.id) {} else {
                  Flies.push(item);
                }
              });
            }
            if (this.taskName == "发起" && Flies.length > 0) {
              this.loading = true
              let param = new FormData();
              param.append("key", "file");
              Flies.forEach((item) => {
                param.append("file", item.raw);
              });
              uploadFile(param)
                .then((ress) => {
                  if (this.form.files) {} else {
                    this.form.files = [];
                  }
                  this.form.files.push(...ress.data);
                  this.fileList = [];
                  Flies = [];
                  taskComplete({
                    taskId: this.taskId,
                    actionName: num == 1 ? "通过" : "不通过",
                    action: num == 1 ? "COMPLETE" : "BACK",
                    formData: this.form,
                    formDefKey: this.form.formDefKey,
                    files: this.form.files,
                    comment:resp.value
                  }).then((res) => {
                    if (res.code == 200) {
                      this.$message({
                        type: "success",
                        message: res.msg,
                      });
                      this.$store.state.tagsView.visitedViews.splice(
                        this.$store.state.tagsView.visitedViews.findIndex(
                          (item) => item.path === this.$route.path
                        ),
                        1
                      );
                      this.$destroy(this.$options.name);
                      this.$router.push("/todoItem/todo");
                      this.loading = false
                    }
                  }).catch(err => {
                    this.loading = false
                  })
                })
                .catch((err) => {
                  this.$message({
                    message: err.msg,
                    type: "error",
                  });
                  this.fileList = this.form.files;
                  this.loading = false
                });
            } else {
              this.loading = true
              taskComplete({
                taskId: this.taskId,
                actionName: num == 1 ? "通过" : "不通过",
                action: num == 1 ? "COMPLETE" : "BACK",
                formData: this.form,
                formDefKey: this.form.formDefKey,
                files: this.fileList,
                comment:resp.value
              }).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.$store.state.tagsView.visitedViews.splice(
                    this.$store.state.tagsView.visitedViews.findIndex(
                      (item) => item.path === this.$route.path
                    ),
                    1
                  );
                  this.$destroy(this.$options.name);
                  this.$router.push("/todoItem/todo");
                  this.loading = false
                }
              }).catch(err => {
                this.loading = false
              })
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      },
    },
  };
</script>

<style scoped lang="scss">
  .dialog {
    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }

    .Subhead {
      text-align: left;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 2px solid #38b3aa;
    }

    .tabletitle {
      width: 100%;
      text-align: center;
      font-weight: bold;
      border: 1px solid rgb(248, 248, 249);
      height: 40px;
      line-height: 40px;
      border-bottom: none;
    }
  }
</style>
